<template>
  <header>
    <el-container>
      <!--    侧边栏  -->
      <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #303643">
        <div style="height: 80px; color: white; display: flex; align-items: center; justify-content: center">
          <span class="logo-title" v-show="!isCollapse">你好，超级管理员！</span>
        </div>

        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#303643"
                 text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none"
                 :default-active="$route.path">
          <el-submenu  index="/main/SchoolLists">
            <template slot="title" >
              <i class="el-icon-menu"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/main/SchoolLists">专业管理</el-menu-item>
          </el-submenu>
        </el-menu>

        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#303643"
                 text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none"
                 :default-active="$route.path">
          <el-submenu  >
            <template slot="title" >
              <i class="el-icon-menu"></i>
              <span>部落管理</span>
            </template>
            <el-menu-item index="/admin/Tribe">部落管理</el-menu-item>
            <el-menu-item index="/admin/TribeApply">加入部落审核</el-menu-item>


          </el-submenu>
        </el-menu>

        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#303643"
                 text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none"
                 :default-active="$route.path">
          <el-submenu  >
            <template slot="title" >
              <i class="el-icon-menu"></i>
              <span>活动管理</span>
            </template>
            <el-menu-item index="/admin/ActivityApply">发布活动审核</el-menu-item>

          </el-submenu>
        </el-menu>




      </el-aside>

      <el-container>

        <el-header>
          <header class="header">
            <div class="logo">
              <i :class="collapseIcon" class="collapse-icon" @click="handleCollapse"></i>
              <span class="logo-text">微讯校园后台管理系统</span>
            </div>
            <div class="user-info">
              <el-dropdown class="dropdown">
                <i class="el-icon-arrow-down dropdown-icon"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </header>
        </el-header>

        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </header>
</template>

<script>
  export default {
    name: "Druginfor",
    data() {
      return {
        isCollapse: false,  // 不收缩
        asideWidth: '200px',
        collapseIcon: 'el-icon-s-fold',
        imgPrex: 'http://localhost:9999/',
        user: JSON.parse(localStorage.getItem('CurUser')),
        dropdownItems: [
          {label: '退出登录', handler: this.logout}
        ]
      }
    },
    props: {
      icon: String
    },
    methods: {
      handleCollapse() {
        this.isCollapse = !this.isCollapse
        this.asideWidth = this.isCollapse ? '64px' : '200px'
        this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
      },
      toUser() {
        console.log('to_user')
        //this.$router.push("/userHome")
      },

      logout() {
        console.log('logout')
        this.$confirm('您确定要退出登录吗?', '提示', {
          confirmButtonText: '确定',  //确认按钮的文字显示
          type: 'warning',
          center: true, //文字居中显示
        })
          .then(() => {
            this.$axios.post("/admin/logout").then(resp=>{

            })
            this.$message({
              type: 'success',
              message: '退出登录成功'
            })
            this.$router.push("/admin/login")
            sessionStorage.removeItem("token")
            sessionStorage.removeItem("admin")
            sessionStorage.removeItem("uId")
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出登录'
            })
          })

      },
    }

  }
</script>

<style scoped>

  .el-aside {
    transition: width .3s;
    box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
  }


  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #fdfdfe;
  }

  .logo {
    display: flex;
    align-items: center;
  }

  .collapse-icon {
    font-size: 26px;
    margin-right: 10px;
    cursor: pointer;
  }

  .logo-text {
    font-size: 24px;
    margin-left: 400px;
  }

  .user-info {
    display: flex;
    align-items: center;
  }

  .user-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
  }

  .dropdown {
    position: relative;
  }

  .user-name {
    margin-right: 5px;
  }

  .dropdown-icon {
    font-size: 20px;
  }

</style>
